<!-- 进度条组件 -->
<template>
    <el-row>
        <el-col :span="24" class="form-progress-box">
            <div class="grid-content bg-purple-dark form-progress">
                <el-steps :active="Number(this.step)" simple>
                    <el-step title="联系人信息" icon="iconfont icon-icon-test" class="register-step-success" v-if="this.registerStatus.isVerified == 0"></el-step>
                    <el-step title="联系人信息" icon="iconfont icon-chenggong" class="register-step-success" v-if="this.registerStatus.isVerified == 1"></el-step>
                    <el-step title="机构认证" icon="iconfont icon-icon-test1" v-if="this.registerStatus.agencyCertificationStatus == 0"></el-step>
                    <el-step title="机构认证" icon="iconfont icon-chenggong" class="register-step-success" v-if="this.registerStatus.agencyCertificationStatus != 0"></el-step>
                    <el-step title="业务授权" icon="iconfont icon-icon-test3" v-if="this.registerStatus.businessAuthorizationStatus == 0"></el-step>
                    <el-step title="业务授权" icon="iconfont icon-chenggong" class="register-step-success" v-if="this.registerStatus.businessAuthorizationStatus != 0"></el-step>
                    <el-step title="绑定银行账户" icon="iconfont icon-icon-test2" v-if="this.registerStatus.accountBinding == 0"></el-step>
                    <el-step title="绑定银行账户" icon="iconfont icon-chenggong" class="register-step-success" v-if="this.registerStatus.accountBinding != 0"></el-step>
                </el-steps>
                <!--{{this.registerStatus}}-->
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    @Component({
        props: ['step','registerStatus']
    })
    export default class FormProcess extends Vue {
        mounted () {
            // console.log(this.step)
        }
    }
</script>

<style lang="scss" scoped>
    .form-progress-box {
        font-size: $__font-size-default;
        display: flex;
        justify-content: center;
        margin-top: 60px;
        margin-bottom: 20px;
        .form-progress {
            width: 960px;
        }
    }
</style>
<style lang="scss">
    .form-progress-box {
        .el-steps--simple {
            height: 40px;
            padding: 0 35px 0 35px;
        }
        .el-step.is-simple .el-step__arrow::after, .el-step.is-simple .el-step__arrow::before {
            height: 34px;
            width: 4px;
            background: #fff;
        }
        .el-step.is-simple .el-step__arrow::before {
            -webkit-transform: rotate(-45deg) translateY(-4px);
            transform: rotate(-45deg) translateY(-4px);
        }
        .el-step.is-simple .el-step__arrow::after {
            -webkit-transform: rotate(52deg) translateY(12px);
            transform: rotate(52deg) translateY(12px);
        }
        .el-step__head.is-process {
            color: $__color-link;
            border-color: $__color-link;
        }
        .el-step__title.is-process {
            color: $__color-link;
            font-weight: 500;
        }
        .el-step__head.is-finish {
            color: $__color-link;
            border-color: $__color-link;
        }
        .el-step__title.is-finish {
            color: $__color-link;
        }
        .iconfont {
            -webkit-text-stroke-width: 0px;
            font-size: 20px;
        }
        .el-step__title.is-wait {
            color: $__color-label;
        }
        .el-step__head.is-wait {
            color: $__color-label;
        }
        .el-step__icon-inner {
            font-weight: 500;
        }

        .register-step-success {
            .el-step__head.is-wait {
                color: $__color-link !important;
            }
            .el-step__title.is-wait {
                color: $__color-link !important;
            }
        }
    }
</style>